.my_wrapper {
  width: 100vw;
}

@keyframes dynamics {
  0% {
    background-position: 0% 30%;
  }
  30% {
    background-position: 30% 50%;
  }

  50% {
    background-position: 50% 80%;
  }
  80% {
    background-position: 80% 100%;
  }

  100% {
    background-position: 100% 0%;
  }
}



.my_wrapper_top {
  width: 100%;
  height: 220px;
  background: linear-gradient(45deg, #ee3437, blue, #a8804f, #944fa8, #496eaa);
  background-size: 1400% 300%;
  animation: dynamics 10s ease infinite;
  -webkit-animation: dynamics 10s ease infinite;
  -moz-animation: dynamics 10s ease infinite;
}

